<script setup lang="ts">
import dayjs from 'dayjs'
import { useRequest } from 'vue-request'
import { useUserInfoStore } from '@/store/userInfo'
import { fetchOrderDetailAPI } from '@/apis/fetchOrderDetail'
import { OrderStatus, OrderType, getOrderStatusString, getOrderTypeString } from '@/types/enum'
import { useGeneralConfigStore } from '@/store/generalConfig'
import { fetchCommentDetailAPI } from '@/apis/fetchCommentDetail'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const generalConfigStore = useGeneralConfigStore()

const id = ref('')

const { data: detail, loading, runAsync } = useRequest(
  () => fetchOrderDetailAPI({ id: id.value }, userInfoStore.userInfo!.token!).then(res => res.data?.data),
  { manual: true },
)

onLoad(async (options) => {
  if (!(options && options.id)) {
    uni.showToast({ title: '页面数据获取失败', icon: 'none' })
    return
  }
  id.value = options.id
  await runAsync()
  uni.setNavigationBarTitle({
    title: getOrderStatusString(detail.value?.order_status),
  })
})

function handleCopyOrderNumber() {
  uni.setClipboardData({
    data: detail.value?.order_number || '',
    success: () => {
      uni.showToast({ title: '复制成功' })
    },
  })
}

function handleCancelOrder() {
  const type = 'normal'
  const id = detail.value!.id.toString()
  const status = detail.value!.order_status.toString()
  router.push({
    name: 'cancelOrder',
    params: { type, id, status },
  })
}

function handleContactPlatform() {
  uni.makePhoneCall({
    phoneNumber: generalConfigStore.generalConfig?.mobile || '',
  })
}

/**
 * @description 点击联系司机时触发。
 */
function handleContactDriver() {
  uni.makePhoneCall({
    phoneNumber: detail.value?.mobile || '',
  })
}

/**
 * @description 点击评价司机时触发
 *
 * @param id item 的 id
 */
function handleRateDriver() {
  router.push({
    name: 'rateDriver',
    params: {
      order_id: detail.value!.id.toString(),
    },
  })
}

async function handleViewRate() {
  const res = await fetchCommentDetailAPI({
    id: detail.value!.id.toString(),
  }, userInfoStore.userInfo!.token)
  if (res.data?.code !== 1) {
    uni.showToast({ title: res.data?.msg, icon: 'none' })
    return
  }
  router.push({
    name: 'rateDriver',
    params: {
      old_data: JSON.stringify(res.data.data),
    },
  })
}
</script>

<template>
  <Spacer height="24" />
  <view class="px-24rpx">
    <OrderStatusCard
      v-if="detail?.order_status"
      :status="detail?.order_status"
      :driver-name="detail?.username"
      :license-plate-number="detail?.car_num"
      :auto-model="detail.car_pinpai"
      :driver-mobile="detail?.mobile"
    />
  </view>
  <Spacer height="24" />
  <view class="px-24rpx">
    <Section title="订单信息">
      <template #headerTrailing>
        <view class="rounded-full from-#FF966D to-#FA5431 bg-gradient-to-r px-17rpx py-10rpx text-26rpx text-white font-bold leading-26rpx">
          {{ getOrderTypeString(detail?.type) }}
        </view>
      </template>
      <Address dot-color="#3F8BF6">
        {{ detail?.start_place || '未知' }}
      </Address>
      <Spacer height="24" />
      <Address dot-color="#FA662F">
        {{ detail?.end_place || '未知' }}
      </Address>
      <Spacer height="32" />
      <Divider width="642" color="#EBEBEB" />
      <Spacer height="40" />
      <TableRow label="订单编号">
        <view class="h-28rpx flex items-center overflow-visible">
          {{ detail?.order_number || '未知' }}
          <Spacer width="18" />
          <button
            class="border-1rpx border-#999999 rounded-10rpx border-solid bg-transparent px-8rpx py-5rpx text-28rpx text-#333333 font-medium leading-28rpx"
            @tap="handleCopyOrderNumber"
          >
            复制
          </button>
        </view>
      </TableRow>
      <Spacer height="44" />
      <TableRow label="订单时间">
        {{ detail?.pay_time ? dayjs.unix(Number(detail.pay_time)).format('YYYY-MM-DD HH:mm') : '未知' }}
      </TableRow>
      <block v-if="detail?.type === OrderType.包车">
        <Spacer height="44" />
        <TableRow label="联系人">
          {{ `${detail?.passengers_name} ${detail.passengers_mobile}` }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="乘车人数">
          {{ detail?.num || '0' }}人
        </TableRow>
      </block>
      <block v-if="detail?.type === OrderType.代叫">
        <Spacer height="44" />
        <TableRow label="乘车人">
          {{ `${detail?.passengers_name} ${detail.passengers_mobile}` }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="乘车人数">
          {{ detail?.num || '0' }}人
        </TableRow>
      </block>
      <block v-if="detail?.type === OrderType.捎件">
        <Spacer height="44" />
        <TableRow label="收件人">
          {{ `${detail?.passengers_name} ${detail.passengers_mobile}` }}
        </TableRow>
      </block>
      <Spacer height="44" />
      <TableRow label="出发时间">
        {{ detail?.start_time || '未知' }}
      </TableRow>
      <block v-if="detail?.type === OrderType.代叫">
        <Spacer height="44" />
        <TableRow label="备注信息">
          {{ detail?.remark || '无备注' }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="代叫人">
          李四  18412341234
        </TableRow>
        <Spacer height="44" />
        <TableRow label="优先联系">
          联系乘车人
        </TableRow>
      </block>
      <block v-if="detail?.type === OrderType.捎件">
        <Spacer height="44" />
        <TableRow label="发件人">
          {{ `${detail?.pronoun_name} ${detail?.pronoun_mobile}` }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="物品类型">
          {{ detail?.goods_type || '' }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="备注信息">
          {{ detail?.remark || '无备注' }}
        </TableRow>
        <Spacer height="44" />
        <TableRow label="图片" direction="column">
          <PictureGrid
            mode="display"
            :width="642"
            :cols="3"
            :pictures="detail?.images?.split(',') || []"
          />
        </TableRow>
      </block>
      <block v-if="detail?.order_status !== OrderStatus.已取消">
        <block v-if="detail?.order_status !== OrderStatus.待接单">
          <Spacer height="44" />
          <TableRow label="接单时间">
            {{ detail?.receive_time }}
          </TableRow>
        </block>
        <block v-if="detail?.order_status !== OrderStatus.待接单 && detail?.order_status !== OrderStatus.待到达">
          <Spacer height="44" />
          <TableRow label="到达时间">
            {{ detail?.arrived_time }}
          </TableRow>
        </block>
        <block v-if="detail?.order_status !== OrderStatus.待接单 && detail?.order_status !== OrderStatus.待到达 && detail?.order_status !== OrderStatus.进行中">
          <Spacer height="44" />
          <TableRow label="完成时间">
            {{ detail?.finish_time }}
          </TableRow>
        </block>
      </block>
      <block v-if="detail?.order_status === OrderStatus.已取消">
        <Spacer height="44" />
        <TableRow label="取消时间">
          {{ detail?.order_cannel_time }}
        </TableRow>
      </block>
    </Section>
    <Spacer height="24" />
    <Section title="费用信息">
      <TableRow label="付款方式">
        微信支付
      </TableRow>
      <Spacer v-if="detail?.complete_money" height="44" />
      <TableRow v-if="detail?.complete_money" label="优惠券抵扣">
        <view class="text-#F53B25">
          -¥ {{ detail.complete_money }}
        </view>
      </TableRow>
      <Spacer height="44" />
      <TableRow label="实付金额">
        <view class="flex items-center">
          {{ detail?.pay_money }}元
          <image
            class="ml-8rpx h-30rpx w-30rpx"
            src="@/static/images/warning_orange_circle.png"
          />
        </view>
      </TableRow>
    </Section>
    <Spacer height="240" />
  </view>
  <view v-if="detail?.order_status === OrderStatus.待接单" class="fixed bottom-30rpx x-center">
    <RGButton type="secondary" size="large" @tap="handleCancelOrder">
      取消订单
    </RGButton>
  </view>
  <view v-if="detail?.order_status === OrderStatus.待到达" class="fixed bottom-30rpx flex items-center x-center">
    <RGButton type="secondary" size="large" :width="250" @tap="handleCancelOrder">
      取消订单
    </RGButton>
    <Spacer width="30" />
    <RGButton type="primary" size="large" :width="422" @tap="handleContactDriver">
      联系司机
    </RGButton>
  </view>
  <view v-if="detail?.order_status === OrderStatus.进行中" class="fixed bottom-30rpx flex items-center x-center">
    <RGButton type="secondary" size="large" :width="250" @tap="handleCancelOrder">
      取消订单
    </RGButton>
    <Spacer width="30" />
    <RGButton type="primary" size="large" :width="422" @tap="handleContactPlatform">
      联系平台
    </RGButton>
  </view>
  <view v-if="detail?.order_status === OrderStatus.已完成" class="fixed bottom-30rpx flex items-center x-center">
    <RGButton type="secondary" size="large" :width="250" @tap="handleCancelOrder">
      取消订单
    </RGButton>
    <Spacer width="30" />
    <RGButton type="primary" size="large" :width="422" @tap="detail?.is_comment ? handleViewRate : handleRateDriver">
      {{ detail.is_comment ? '查看评价' : '评价司机' }}
    </RGButton>
  </view>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'orderDetail'
</route>
